<link rel="stylesheet" type="text/css" href="src/css/view/commonAdd.css">
<div class="layui-col-md12">
  <div class="layui-card">
    <div class="layui-card-header">设备添加</div>
    <div class="layui-card-body">
      <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">系统</label>
          <div class="layui-input-inline">
            <select name="system" lay-verify="required" lay-filter="system">
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="project" lay-filter="project">
              <option value="">项目 (可选)</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地点</label>
          <div class="layui-input-inline">
            <select name="site" lay-filter="site">
              <option value="">地点 (可选)</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="stn" lay-filter="stn">
              <option value="">位置 (可选)</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">类型</label>
          <div class="layui-input-inline">
            <select name="type" lay-verify="required" lay-filter="type">
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="style" lay-verify="required" lay-filter="style">
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">到货日期</label>
            <div class="layui-input-block">
              <input name="delivery" id="date1" autocomplete="off" class="layui-input" type="text" lay-verify="required">
            </div>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">设备编号</label>
          <div class="layui-input-block">
            <input name="sn" autocomplete="off" placeholder="编号或别名" class="layui-input" type="text" lay-verify="required" style="width:329px;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">备注</label>
          <div class="layui-input-block">
            <input name="remark" autocomplete="off" placeholder="备注" class="layui-input" type="text" style="width:329px;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">状态</label>
          <div class="layui-input-inline">
            <select name="status" lay-verify="required">
              <option value="0">备件</option>
              <option value="1">在用</option>
              <option value="2">故障</option>
              <option value="3">维修</option>
            </select>
          </div>
        </div>
        <div class="more-wrap">
          <div class="more-btn">
            <span class="layui-icon layui-icon-add-1"></span>
            <span class="more-text">更多信息</span>
          </div>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" lay-submit="" lay-filter="add">添加</button>
          <button class="layui-btn layui-btn-primary" lay-filter="cancel">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>



<script>
var access_token = sessionStorage.access_token;
var userId = sessionStorage.userid;

layui.use(['form','laydate'], function(){
  var form = layui.form;
  var laydate = layui.laydate;
  
  form.render();
  laydate.render({
    elem: '#date1',   //指定元素
    value:todayDate('-')    //默认限制今天日期
  });
  
  //初始化select
  $('select[name="type"]').attr('disabled','disabled');
  $('select[name="site"]').attr('disabled','disabled');
  $('select[name="style"]').attr('disabled','disabled');
  $('select[name="stn"]').attr('disabled','disabled');
  
  var selectData;
  //获取select选项
  $.ajax({
    url: 'actionApi/Device/select',
    type:'post',
    data:{"userId":userId},
    headers:{"Authorization":"Basic "+access_token},
    success:function(res){
      selectData = res.data;
      var systemList = selectData.system;
      for(var key in systemList){
        $('select[name="system"]').append('<option value="'+key+'">'+systemList[key]+'</option>');
      }
      form.render('select');
      selectInit($('select[name="system"]').val());
    }
  });
  
  //系统select选择事件
  form.on('select(system)', function(data){
    selectInit(data.value);
  });
  
  //初始化系统select菜单方法
  function selectInit(systemId){
    $('select[name="project"]').attr('disabled','disabled');
    $('select[name="project"]').html('<option value="">项目 (可选)</option>');
    $('select[name="site"]').attr('disabled','disabled');
    $('select[name="site"]').html('<option value="">地点 (可选)</option>');
    $('select[name="stn"]').attr('disabled','disabled');
    $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
    $('select[name="type"]').attr('disabled','disabled');
    $('select[name="type"]').html('<option value="">类型</option>');
    $('select[name="style"]').attr('disabled','disabled');
    $('select[name="style"]').html('<option value="">式样</option>');
    //如果系统里有项目，项目select增加选项并启用
    if(selectData.project[systemId]){
      $('select[name="project"]').removeAttr('disabled');
      $('select[name="project"]').html('<option value="">项目 (可选)</option>');
      for(var key in selectData.project[systemId]){
        $('select[name="project"]').append('<option value="'+key+'">'+selectData.project[systemId][key]+'</option>');
      }
    }
    //如果系统里有地点，地点select增加选项并启用
    if(selectData.site[systemId]){
      $('select[name="site"]').removeAttr('disabled');
      $('select[name="site"]').html('<option value="">地点 (可选)</option>');
      for(var key in selectData.site[systemId]){
        $('select[name="site"]').append('<option value="'+key+'">'+selectData.site[systemId][key]+'</option>');
      }
    }
    //如果系统里有类型，类型select增加选项并启用
    if(selectData.type[systemId]){
      $('select[name="type"]').removeAttr('disabled');
      $('select[name="type"]').html('<option value="">类型</option>');
      for(var key in selectData.type[systemId]){
        $('select[name="type"]').append('<option value="'+key+'">'+selectData.type[systemId][key]+'</option>');
      }
    }
    form.render('select');
  }
  
  //地点select选择事件
  form.on('select(site)', function(data){
    var siteId = data.value;
    //位置select增加选项
    if(selectData.stn[siteId]){
      $('select[name="stn"]').removeAttr('disabled');
      $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
      for(var key in selectData.stn[siteId]){
        $('select[name="stn"]').append('<option value="'+key+'">'+selectData.stn[siteId][key]+'</option>');
      }
    }else{
      $('select[name="stn"]').attr('disabled','disabled');
      $('select[name="stn"]').html('<option value="">位置 (可选)</option>');
    }
    form.render('select');
  });
  
  //类型select选择事件
  form.on('select(type)', function(data){
    var typeId = data.value;
    //式样select增加选项
    if(selectData.style[typeId]){
      $('select[name="style"]').removeAttr('disabled');
      $('select[name="style"]').html('<option value="">式样</option>');
      for(var key in selectData.style[typeId]){
        $('select[name="style"]').append('<option value="'+key+'">'+selectData.style[typeId][key]+'</option>');
      }
    }else{
      $('select[name="style"]').attr('disabled','disabled');
      $('select[name="style"]').html('<option value="">式样</option>');
    }
    form.render('select');
  });
  
  
  form.on('submit(add)', function(data){
    data.field["userId"] = userId;  //表单数据中增加用户名
    $.ajax({
      url: 'actionApi/Device/add',
      type:'post',
      data:{
        "":JSON.stringify(data.field)
      },
      headers:{"Authorization":"Basic "+access_token},
      success:function(res){
        if(res.code==0){
          var id = layer.msg("添加成功", {
            time: false,   //取消自动关闭
            btn: ['完成', '继续添加'],
            btn1:function(){
              var view = sessionStorage.viewNow;
              $('#view').load('src/view/'+view+'.html');
              layer.close(id);
            },
            btn2:function(){
              $('input[name="sn"]').val('');
              $('input[name="remark"]').val('');
              layer.close(id);
            }
          });
        }else{
          layer.msg("添加失败");
        }
      }
    });
    
    
    
    return false;
  });
  form.on('submit(cancel)', function(data){
    var view = sessionStorage.viewNow;
    $('#view').load('src/view/'+view+'.html');
  });
  
  //增加更多信息点击事件
  $('.more-btn').click(function(){
    var self = $(this);
    infoHtml = '<div class="layui-form-item addItem">'+
                 '<label class="layui-form-label">'+
                   '<input type="text" value="" class="info-input">'+
                 '</label>'+
                 '<div class="layui-input-inline">'+
                   '<input type="text" name="" placeholder="" value="" autocomplete="off" class="layui-input">'+
                   '<div class="delBtn"><span class="layui-icon">&#x1006;</span></div>'+
                 '</div>'+
               '</div>';
    self.parent().before(infoHtml);
  });
  
  //增加条目-名称输入监听
  $('body').on('blur', '.info-input', function(){
    var self = $(this);
    self.parent().parent().find('.layui-input').attr('name',self.val());
    
  });

  //增加条目-鼠标移入监听-显示删除按钮
  $('body').on('mouseover', '.addItem', function(){
    var self = $(this);
    self.find('.delBtn').show();
  });
  $('body').on('mouseout', '.addItem', function(){
    var self = $(this);
    self.find('.delBtn').hide();
  });

  //增加条目-删除按钮点击事件
  $('body').on('click', '.delBtn', function(){
    var self = $(this);
    self.parent().parent().remove();
  });
  
  
});




</script>